<template>
  <div class="home">
    <img v-show="showicon" @click="goTop" class="back" src="../assets/back.png" alt="">
    <app-header></app-header>
    <div class="content" @scroll="scroll">
      <app-tab></app-tab>
      <app-list :childrenList="showList"></app-list>
    </div>
  </div>
</template>

<script>
import AppHeader from "../components/appHeader.vue";
import AppTab from "../components/appTab.vue";
// @ is an alias to /src
import api from "../api/index";
import { reactive, toRefs, watch } from "vue";
import AppList from "../components/appList.vue";
import { useStore } from 'vuex';
export default {
  name: "Home",
  components: {
    AppHeader,
    AppTab,
    AppList,
  },
  setup(props) {
    const { state } = useStore();
    const data = reactive({
      allList: [], // 所有的数据
      showList: [], // 展示的数据
      showicon: false, // 是否显示回到顶部
    });
    api.get("/topics").then((res) => {
      data.allList = res.data;
      data.showList = res.data;
      if (state.checkTxt){
        data.showList = data.allList.filter(item => item.tab.includes(state.checkTxt))
      }
    });
    watch(() => state.checkTxt,(newVal)=>{
      data.showList = data.allList.filter(item => item.tab.includes(newVal))
      // if (newVal) {
      //   data.showList = data.allList.filter(item => item.tab == newVal)
      // } else {
      //   data.showList = data.allList;
      // }
    })
    let dom = null;
    let top = 0; // 滚动的距离
    const scroll = (e) => {
       dom = e.target;
       top = dom.scrollTop;
       if(dom.scrollTop>400){
         data.showicon = true
       } else {
         data.showicon = false
       }
    }
    const goTop = () => {
      
      let time = setInterval(() => {
        if(top>0){
          top = top - 10;
          dom.scrollTop = top;
        } else {
          clearInterval(time)
        }
      },1);
    }
    return {
      ...toRefs(data),
      scroll,
      goTop
    };
  },
};
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  .content {
    height: calc(100% - 100px);
    overflow: auto;
  }
  .back{
    position: fixed;
    bottom: 100px;
    right: 10px;
    width: 30px;
  }
}
</style>
